import { useKeyPress } from 'ahooks'
import { useDispatch } from 'react-redux'
import { ActionCreators as UndoActionCreators } from 'redux-undo'
import {
    removeComponent,
    copySelectedComponent,
    pasteSelectedComponent,
    selectPrevComponent,
    selectNextComponent,
} from '../store/componentsReducer'

/**
 * 判断当前光标选中的dom元素[判断当前元素是否是快捷键要操作的元素]
 */
function isActiveElementValue() {
    const activeElem = document.activeElement
    // 项目加入dnd-kit前的逻辑。
    // if (activeElem === document.body) return true

    // 项目加入dnd-kit之后的逻辑。
    if (activeElem === document.body) return true
    if (activeElem?.matches('div[role="button"]')) return true
    return false
}
/**
 * 页面快捷键操作
 * @returns
 */
function useBindCanvasKeyPress() {
    const dispatch = useDispatch()
    // 删除
    useKeyPress(['backspace', 'delete'], () => {
        if (!isActiveElementValue()) return
        dispatch(removeComponent())
    })
    // 复制
    useKeyPress(['ctrl.c', 'meta.c'], () => {
        if (!isActiveElementValue()) return
        dispatch(copySelectedComponent())
    })

    // 粘贴
    useKeyPress(['ctrl.v', 'meta.v'], () => {
        if (!isActiveElementValue()) return
        dispatch(pasteSelectedComponent())
    })
    // 选中上一个组件
    useKeyPress(['uparrow'], () => {
        if (!isActiveElementValue()) return
        dispatch(selectPrevComponent())
    })
    // 选中下一个组件
    useKeyPress(['downarrow'], () => {
        if (!isActiveElementValue()) return
        dispatch(selectNextComponent())
    })
    // 撤销
    useKeyPress(
        ['ctrl.z', 'meta.z'],
        () => {
            if (!isActiveElementValue()) return
            dispatch(UndoActionCreators.undo())
        },
        {
            // 严格匹配【如果没有严格匹配，那么按住 Ctrl+Shift+Z 也会触发这个】
            exactMatch: true,
        }
    )
    // 恢复 | 重做
    useKeyPress(['ctrl.shift.z', 'meta.shift.z'], () => {
        if (!isActiveElementValue()) return
        dispatch(UndoActionCreators.redo())
    })
}
export default useBindCanvasKeyPress
